<template>
    <div class="login">
        <div class="logo"></div>
        <div class="input-box">
            <span class="use"></span><input type="text" placeholder="账号/手机号/邮箱" autocomplete="off" />
        </div>
        <div class="input-box">
            <span class="mima"></span>
            <input type="password" placeholder="请输入密码" autocomplete="off"  v-show="mimaselect" v-model="mima"/>
            <input type="text" placeholder="请输入密码" autocomplete="off" v-show="!mimaselect" v-model="mima"/>
            <span class="yan" v-show="mimaselect" @click="mimachange"></span>
            <span class="yan_active" v-show="!mimaselect" @click="mimachange"></span>
        </div>
        <div class="jizhu">
            <div class="ji"><span @click="remember" :class="{'active': rememberMima}"></span>记住密码</div>
        </div>
        <div class="btn">登录</div>
        <div class="a-box">
            <router-link to="/password">忘记密码？</router-link>
            <router-link to="/register">注册</router-link>
        </div>
    </div>
</template>



<script>

export default {
    data(){
        return{
            mimaselect:true,
            mima:'',
            rememberMima:false
        }
    },
    methods:{
        mimachange:function(){
            this.mimaselect = !this.mimaselect;
        },
        remember:function(){
            // var strKey = "strKey"; 
            // var storage = window.localStorage; 
            // if(storage.getItem(strKey)!=null){ 
            //     alert(storage.getItem(strKey)+'localStorage'); 
            // }else if(Cookie.read(strKey)!=null){ 
            //     alert(Cookie.read(strKey)+'cookie'); 
            // } 


            this.rememberMima = !this.rememberMima;
            if(this.rememberMima){
                
                // if (storage) { 
                //     storage.setItem(strKey, this.mima);   
                // } else { 
                //     Cookie.write(strKey, this.mima);  
                // } 
            }else{

            }
        }
    }
}
</script>

<style lang="less" rel="stylesheet/less">
.login{
    width:100%;
    height:100%;
    background:url('bg.png') no-repeat;
    background-size:100% 100%;
    position:absolute;
    .logo{
        width:2.78rem;
        height:1.03rem;
        background:url('logo.png') no-repeat;
        background-size:100% 100%;
        margin:1.6rem auto 1.96rem;
    }
    .input-box{
        width:6rem;
        height:1rem;
        background: rgba(255,255,255,0.24);
        margin:0.4rem auto 0;
        display:flex;
        position:relative;
        span{
            display:inline-block;
            width:0.9rem;
            height:1rem;
            &.use{
                background:url('use.png') no-repeat;
                background-size:0.33rem 0.33rem;
                background-position:0.26rem 0.36rem;
            }
            &.mima{
                background:url('mima.png') no-repeat;
                background-size:0.29rem 0.34rem;
                background-position:0.3rem 0.32rem;
            }
            &.yan{
                position:absolute;
                right:0;
                top:0;
                background:url('yan.png') no-repeat;
                background-size:0.44rem 0.24rem;
                background-position:0.2rem 0.4rem;
            }
            &.yan_active{
                position:absolute;
                right:0;
                top:0;
                background:url('yan-active.png') no-repeat;
                background-size:0.44rem 0.24rem;
                background-position:0.2rem 0.4rem;
            }
        }
        input{
            flex:1;
            height:1rem;
            font-size: 0.3rem;
            color: #FFFFFF;
            background: rgba(255,255,255,0);
            &:-webkit-autofill{
                color: #FFFFFF;
                background: rgba(255,255,255,0);
            }
        }
    }
    .jizhu{
        width:6rem;
        margin:0.3rem auto 0;
        position:relative;
        .ji{
            position:absolute;
            right:0;
            top:0;
            font-size: 0.28rem;
            color: #FFFFFF;
            span{
                width:0.34rem;
                height:0.34rem;
                background:url('gou.png') no-repeat;
                background-size:100% 100%;
                display:inline-block;
                margin-right:0.1rem;
                vertical-align: sub;
                &.active{
                    background:url('gou-active.png') no-repeat;
                    background-size:100% 100%;
                }
            }
        }
    }
    .btn{
        width:6rem;
        height:1rem;
        margin:0.94rem auto 0;
        text-align:center;
        background: #FBF6F5;
        line-height:1rem;
        font-size: 0.34rem;
        color: #00D397;
    }
    .a-box{
        width:6rem;
        margin:0.46rem auto 0;
        display: flex;
        justify-content: space-between;
        a{
            font-size: 0.28rem;
            color: #FFFFFF;
        }
    }
    ::-webkit-input-placeholder { /* WebKit browsers */  
    color:    #FFFFFF;  
    }  
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */  
    color:    #FFFFFF;  
    }  
    ::-moz-placeholder { /* Mozilla Firefox 19+ */  
    color:    #FFFFFF;   
    }  
    :-ms-input-placeholder { /* Internet Explorer 10+ */  
    color:    #FFFFFF;   
    }  
}



input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    color: #FFFFFF!important;
    background: rgba(255,255,255,.6)!important;
}
</style>

